<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html> 
<head>
<base href="<%=basePath%>">

<title>规划阶段</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="js/webuploader-0.1.5/webuploader.css" />

<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script src="js/select2/select2.min.js"></script>
<script src="js/sharefunction.js"></script>

<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>

<style type="text/css">
</style>
</head>

<script type="text/javascript">
	$(function() {
		
		//详规指标数据填写
		initSelectData();
		//设置用地性质默认值
		var planLandPropertyS2=$("#planLandProperty").select2({
			tags : true
		});
		//设置用地性质默认值
		planLandPropertyS2.val("${requestScope.planStage.planLandProperty }").trigger("change");
		//初始化表单 
		mySubmit("planStageForm", planStageInitForm, planStageAddSuccess);
		initPicEditData();
		getFiles();
		
		//鼠标悬浮提示
		toolTip(true);
	});
	//获取编辑页面图片的数据
	function initPicEditData(){
		var fujians = ${requestScope.fujianList};
		//console.log(fujians);
		html="";
		$.each(fujians, function(i,val) {
			var html = "<tr><td style='width: 120px;'>" + val.article + "</td><td><!--上传附件部分--><div style='display: inline-block;'><div id='list_" + val.id + "'></div><div id='file_" + val.id + "'>上传</div></div><a href='javascript:void(0)'onclick='delTrPlan(this)'><i class='icon-fullscreen'></i></a></td>";
			//添加html元素
			$("#addtrtable").append(html);
			//初始化html元素，为其增加附件上传功能
			initWebUpload("file_" + val.id, "list_" + val.id,val.id, "planStage_articleId", planStageSuccess, planStageErr);
		});
		
	}
	//展示附件
	function getFiles() {
		var fujians = ${requestScope.fujianList};
		$.each(fujians, function(i,val) {
			getFileListByFlag($("#planStageForm input[name='id']").val(), val.id, 1,"#list_"+val.id, setRFL,imgPlus);
		});
	}
	var rFileList=new Array();//
	//设置待删除附件的值到集合中
	function setRFL(id,_this){
		layer.confirm('删除该图片？',{
			title:'警告',
			icon:0,
			shade:[0.1, '#fff']
		},function(){
			rFileList.push(id);
			//删除指定缩略图
			$("#"+id).remove();
			layer.close(layer.index);
		});
	}
	
	function imgPlus(data) {
			$.each(data, function(i, v) {
				//图片放大
				PostbirdImgGlass.init({
					domSelector : "#" + v.id + " img",
					animation : true,
					myDocument : window.parent.parent.parent
				});
			});
			$("#planStageForm .uploadcancel").css("display","none");
		}

	function initSelectData() {
		$.getJSON("dictionariesArticle/getDictionariesArticle", {
			classifyId : "规划阶段",
			direction : ""
		}, function(data, status) {
			if (status == "success") {
				$.each(data, function(i, v) {
					var html ="";
					if(v){
						html = "<option value=\"" + v.id + "\">" + v.article + "</option>";
						$("#planIndicator").append(html);
					}
				});
				
			}
			 $("#planIndicator").select2({
					tags : true
				});
		});
		//var arr = [ "规划地段位置图", "规划总平面图", "规划地段现状图", "道路交通规划图", "绿化景观规划图", "综合管网规划图", "竖向规划图", "建筑平、立、剖面图" ];
	}
</script>
<body>
	<div style="padding:0px 10px">
		<form id="planStageForm" method="post"
			action="project/approval/addPlan">
			<!-- 上传文件返回的附件id -->
			<input type="text" id="planStage_articleId"
				name="planStage_articleId" value="" hidden="hidden"
				style="display: none;" />

			<div class="panel panel-default">
				<div class="panel-heading">
					<h5 class="panel-title">控规指标</h5>
				</div>
				<div class="panel-body">
					<table cellpadding="10" cellspacing="5" class="mytable" >
						<tr>
							<td width="73" class="td-right">规划时间</td>
							<td width="260"><input id="planDate" name="planDate" class="Wdate"
								value="<fmt:formatDate value="${requestScope.planStage.planDate }" pattern="yyyy-MM-dd" />"
								onClick="WdatePicker()" /> <span style="color:red">*</span></td>
							<td width="73" class="td-right">规划名称</td>
							<td width="260"><input name="planName" class="toolTip"
								value="${requestScope.planStage.planName }" /></td>
							<td width="73" class="td-right">占地面积</td>
							<td><input name="planArea"
								value="<fmt:formatNumber value="${requestScope.planStage.planArea }" pattern="0.00"/>" /> ㎡</td>
						</tr>
						<tr>
							<td width="73" class="td-right">建筑密度</td>
							<td><input name="planBuildingDensity"
								value="<fmt:formatNumber value="${requestScope.planStage.planBuildingDensity }" pattern="0.00"/>" /> %</td>
							<td width="73" class="td-right">用地性质</td>
							<td><select id="planLandProperty" name="planLandProperty"
								style="width:160px;">
									<option value="" selected="selected" >请选择</option>
									<c:forEach items="${landPropertyList }" var="p">
										<option value="${p }" selected>${p }</option>
									</c:forEach>
							</select></td>
							<td width="73" class="td-right">限制高度</td>
							<td><input name="planMaxHeight"
								value="<fmt:formatNumber value="${requestScope.planStage.planMaxHeight }" pattern="0.00"/>" /> m</td>
						</tr>
						<tr>
							<td width="73" class="td-right">绿化率</td>
							<td><input name="planAfforest"
								value="<fmt:formatNumber value="${requestScope.planStage.planAfforest }" pattern="0.00"/>" /> %</td>
							<td width="73" class="td-right">容积率</td>
							<td colspan="3"><input name="planVolume"
								value="<fmt:formatNumber value="${requestScope.planStage.planVolume }" pattern="0.00"/>" /> %</td>
						</tr>
						<tr>
							<td width="73"class="td-right">四至红线</td>
							<td colspan="2">东至&nbsp;<input style="width: 273px;" class="toolTip"
								name="planEast" value="${requestScope.planStage.planEast }" /></td>
							<td></td>
							<td colspan="2">西至&nbsp;<input style="width: 273px;" class="toolTip"
								name="planWest" value="${requestScope.planStage.planWest }" /></td>
						</tr>
						<tr>
							<td width="73"></td>
							<td colspan="2">南至&nbsp;<input style="width: 273px;" class="toolTip"
								name="planSouth" value="${requestScope.planStage.planSouth }" /></td>
							<td></td>
							<td colspan="2">北至&nbsp;<input style="width: 273px;" class="toolTip"
								name="planNorth" value="${requestScope.planStage.planNorth }" /></td>
						</tr>
					</table>
				</div>
			</div>

			<div class="panel panel-default">
				<div class="panel-heading">
					<h5 class="panel-title">详规指标</h5>
				</div>
				<div class="panel-body">
					<p>
						<span class="style_btn">详规指标</span> <span class="style_input">
							<select class="js-example-basic-single" name="planIndicator"
							id="planIndicator" style="width:160px;">
						</select>
						</span> <a class="btn btn-danger radius" onclick="addTrPlan()" name="addXGZB"> 添加</a>
					</p>
					<table id="addtrtable" cellpadding="10" cellspacing="5"
						class="mytable">

					</table>
				</div>
			</div>
			<!-- 修改时添加变更说明 -->
			<div style="margin:10px;" hidden="hidden" id="changeRemark">
				变更说明<textarea rows="3" name="changeRemark"style="width:70%"></textarea><span style="color:red;">*</span>
			</div>
			<input type="hidden" id="entityId_id" name="id"
				value="${requestScope.planStage.id }" />
			<div style="width:100%;text-align:center; padding-top:0px">
				<c:choose>
					<c:when test="${empty requestScope.planStage }">
						<button class="btn btn-danger radius my-btn"
							onclick="savePlanStage(0)" type="button">提交</button>
						<button class="btn btn-danger radius my-btn"
							onclick="savePlanStage(1)" type="button">保 存</button>
						<a class="btn btn-default radius"
							onClick="resetForms('planStageForm');"> 重置 </a>
						<br />
					</c:when>
					<c:otherwise>
						<shiro:hasPermission name="permission:edit">
							<button id="modifyBtn" class="btn btn-danger radius my-btn"
								onclick="savePlanStage(3)" type="button">启用编辑</button>
							<button class="btn btn-danger radius my-btn hidbtn"
								onclick="savePlanStage(2)" type="button">保存修改</button>
							<a class="btn btn-default radius hidbtn"
								onClick="resetForms('planStageForm');"> 重置 </a>
						</shiro:hasPermission> 
					</c:otherwise>
				</c:choose>
			</div>
		</form>
	</div>

	<script type="text/javascript">
		$(function() {
			//如果已经保存过了，则开启只读状态
			<c:if test="${not empty requestScope.planStage }">
				$("#planStageForm").find("input,textarea").attr("readonly",true);
				$("#planStageForm").find("select").attr("disabled",true);
				$("#planStageForm .icon-fullscreen").hide();
				$("#planStageForm .Wdate,[name='addXGZB']").attr("disabled",true);
				$("#planStageForm div[id^='file']").unbind("click").click(function(){
			        return false;
			    }).hide();
			</c:if>
			
		});
		//要删除的详规指标
		var delArticleIds = new Array;
		function delTrPlan(obj) {
			var delArticleId = $(obj).parent().parent().find("div[id^=list_]").attr("id").substring(5);
			delArticleIds.push(delArticleId);
			$(obj).parent().parent().remove();
		}
		
		var optPlanStage;
		//optPlanStage操作字段，0：临时保存；1：新增；2：修改
		function savePlanStage(val){
			optPlanStage=val;
			if(val==3){
				var approvalCount = ${approvalCount};
				if(approvalCount == 0 ){
					//解除锁定状态
					var index=layer.confirm('确定开启编辑状态？', {
					 	offset:'20%',
						shade:0
					}, function(){
						//去除只读开启按钮编辑
					   $("#planStageForm #changeRemark").show();
					   $("#planStageForm").find("input,textarea").attr("readonly",false);
					   $("#planStageForm").find("select,[name='addXGZB']").attr("disabled",false);
					   $("#planStageForm .icon-fullscreen").show();
					   $("#planStageForm #modifyBtn").hide();
					   $("#planStageForm .hidbtn").addClass("showbtn");
					   $("#planStageForm .uploadcancel").show();
					   $("#planStageForm .Wdate").attr("disabled",false).attr("readonly",true);
					   var $fileBtn=$("#planStageForm div[id^='file']").unbind("click").show().children("div").css({"width":"58px","height":"28px"});
					   layer.close(index);
					});
				}else{
					layer.msg("此条数据已提交过审批，不能重复提交");
				}
			}else{
				
				$("#planStageForm").submit();
			}
		}
		var pi;
		function planStageInitForm() {
			pi=layer.load(2);
			var fkPa = parent.$("#fkPa").val(); 
			var id = $("#planStageForm #entityId_id").val();
			var planDate = $("input[name='planDate']").val();
			var planName = $("input[name='planName']").val();
			var planArea = $("input[name='planArea']").val();
			var planBuildingDensity = $("input[name='planBuildingDensity']").val();
			var planLandProperty = $("select[name='planLandProperty']").val();
			var planMaxHeight = $("input[name='planMaxHeight']").val();
			var planAfforest = $("input[name='planAfforest']").val();
			var planVolume = $("input[name='planVolume']").val();
			
			var planEast = $("input[name='planEast']").val();
			var planWest = $("input[name='planWest']").val();
			var planSouth = $("input[name='planSouth']").val();
			var planNorth = $("input[name='planNorth']").val();
			var fkProjectApproval = window.parent.$("#fkPa").val();
			//物件集合
			var planStage_articleId = $("input[name='planStage_articleId']").val();
			var changeRemark = $("#planStageForm textarea[name='changeRemark']").val();
			if(id!="" && id!=null && id!=undefined){
				if(changeRemark==""){
					layer.alert("变更说明不能为空");
					layer.close(pi);
					return null;
				}
			}
			if(planDate==""){
				layer.msg("规划时间不能为空");
				layer.close(pi);
				return null;
			}else if (!testNum(planArea)) {
				layer.msg("占地面积请输入数值");
				$("input[name='planArea']").focus();
				layer.close(pi);
				return null;
			} else if (!testNum(planBuildingDensity)) {
				layer.msg("建筑密度请输入数值");
				$("input[name='planBuildingDensity']").focus();
				layer.close(pi);
				return null;
			}else if (!testNum(planMaxHeight)) {
				layer.msg("限制高度请输入数值");
				$("input[name='planMaxHeight']").focus();
				layer.close(pi);
				return null;
			}else if (!testNum(planAfforest)) {
				layer.msg("绿化率请输入数值");
				$("input[name='planAfforest']").focus();
				layer.close(pi);
				return null;
			}else if (!testNum(planVolume)) {
				layer.msg("容积率请输入数值");
				$("input[name='planVolume']").focus();
				layer.close(pi);
				return null;
			}else if(!valLength(50,planEast)){
				layer.msg("字数不能超过50字");
				$("input[name='planEast']").focus();
				layer.close(pi);
				return null;
			} else if(!valLength(50,planWest)){
				layer.msg("字数不能超过50字");
				$("input[name='planWest']").focus();
				layer.close(pi);
				return null;
			}else if(!valLength(50,planSouth)){
				layer.msg("字数不能超过50字");
				$("input[name='planSouth']").focus();
				layer.close(pi);
				return null;
			}else if(!valLength(50,planNorth)){
				layer.msg("字数不能超过50字");
				$("input[name='planNorth']").focus();
				layer.close(pi);
				return null;
			}else {
				return {
					id:id,
					planDate : planDate,
					planName : planName,
					planArea : planArea,
					planBuildingDensity : planBuildingDensity,
					planLandProperty : planLandProperty,
					planMaxHeight : planMaxHeight,
					planAfforest : planAfforest,
					planVolume : planVolume,
					planEast : planEast,
					planWest : planWest,
					planSouth : planSouth,
					planNorth : planNorth,
					fkProjectApproval : fkProjectApproval,
					planStage_articleId : planStage_articleId,
					delArticleIds:delArticleIds,
					opt : optPlanStage,
					rFileList:rFileList,
					fkPa :fkPa,
					changeRemark:changeRemark
				};
			}
		}
		function planStageAddSuccess(responseText) {
			layer.close(pi);
			if (responseText.success) {
				layer.alert("保存成功！", {
					offset:'20%',
					shade:[0.1,'#fff']
				}, function() {
					parent.location.reload();
	
				});
				//重置表单
				//$("#planStageForm")[0].reset();
				
			} else {
				alert(responseText.msg);
				layer.closeAll();
			}
		}
		
		//上传成功回调
		function planStageSuccess(file, response) {
			PostbirdImgGlass.init({
				domSelector : "td img",
				animation : true,
				myDocument : window.parent.parent.parent
			});
		}
		//上传失败回调
		function planStageErr(file, data) {
			//alert("上传失败回调");
		}
		/********************************************************************/
		//添加文件上传插件到表单
		function addTrPlan() {
			var tag = $("#planIndicator").find("option:selected");
			var name = tag.text();
			var tagId = tag.val();
	
			//判断是否已经存在元素，如果存在则不进行添加
			if ($("#file_" + tagId).length > 0) {
				return false;
			}
	
			var html = "<tr><td style='width: 120px;'>" + name + "</td><td><!--上传附件部分--><div style='display: inline-block;'><div id='list_" + tagId + "'></div><div id='file_" + tagId + "'>上传</div></div><a href='javascript:void(0)'onclick='delTrPlan(this)'><i class='icon-fullscreen'></i></a></td>";
			//添加html元素
			$("#addtrtable").append(html);
			//初始化html元素，为其增加附件上传功能
			initWebUpload("file_" + tagId, "list_" + tagId, tagId, "planStage_articleId", planStageSuccess, planStageErr);
		}
	</script>
</body>
</html>

